<template>
  <a-card
    :bordered="false"
    :title="$route.meta.title"
  >
    <section class="layout-container">
      <a-tree
        v-if="menus.length"
        :show-line="true"
        :show-icon="true"
        :tree-data="menus"
        class="layout-tree"
        defaultExpandAll
        :replaceFields="{ title: '_name', key: 'id', children: 'children' }"
        @select="handleSelect"
      >
      </a-tree>
      <section class="layout-list">
        <slot :currentId="currentId"></slot>
      </section>
    </section>
  </a-card>

</template>

<script>
import { areaServices } from '@/common/services'
import AreaTree from '@/components/src/AreaTree'
import { userModule } from '@/store/modules/user'
import { permission } from '@/store/modules/permission'

export default {
  name: 'MenuLayout',
  props: {
  },
  data () {
    return {
      data: [],
      currentId: ''
    }
  },
  computed: {
    menus () {
      return permission.menuData
    }
  },
  mounted () {
  },
  methods: {
    handleSelect (data) {
      this.currentId = data.pop()
      console.log('currentId =>', this.currentId)
    },
  }
}
</script>

<style lang="less" scoped>
.layout-container {
  display: flex;
  height: 100%;
  .layout-tree {
    width: 300px;
    flex: none;
    height: 100%;
    overflow-y: scroll;
    background-color: #fff;
    border-right: 1px solid #eee;
    margin-right: 10px;
  }
}
/deep/ .ant-card-body {
  height: calc(100vh - 160px);
  overflow: hidden;
}
.layout-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: auto;
  overflow-y: scroll;
}
</style>
